Vue中v

2024-01-20 08:14| 来源: 网络整理| 查看: 265

v-for循环遍历数据

永远不要把 v-if 和 v-for 同时用在同一个元素上。风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

1.v-for遍历普通数组 in前面如果是一个变量，那么该变量保存的是数组中的数据 in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标 {item}} --> 数据：{{item}}>>>下标：{{index}} 数据：{{item}} new Vue({ el:"#app", data:{ array:['张三','李四','王五','老六'] } }); 2.v-for遍历对象数组

如果是一个变量，那么该变量保存的是数据【对象】

{typeof item}} --> 序号姓名年龄性别家庭住址操作 {{index+1}} {{item.name}} {{item.age}} {{item.sex}} {{item.address}} 编辑删除 new Vue({ el: "#app", data: { code: 200, msg: '成功', res: [ { name: "张三", age: 21, sex: "男性", address: "郑州市中原区" }, { name: "李四", age: 21, sex: "男性", address: "郑州市二七区" }, { name: "老六", age: 22, sex: "男性", address: "郑州市金水区" } ] } }); 3.v-for遍历对象

如果是一个变量，那么保存的是对象中的属性值

如果是两个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名

如果是三个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名，第三个变量保存的是下标

v-for="o1 in obj" o1:属性值 v-for="(o1,o2) in obj" o1:属性值 o2:属性名

v-for="(o1,o2,o3) in obj" o1:属性值 o2:属性名 o3:下标

{o1}}--> {o1}}>>>{{o2}}--> {{o1}}>>>{{o2}}>>>{{o3}} new Vue({ el:"#app", data:{ obj:{ name: "李四", age: 21, sex: "男性", address: "郑州市二七区" } } }); 4.v-for循环数字

in后面不仅可以放数组、对象数组、对象，还可以放数字

在in前面用一个变量存储当前次数，注意：此变量是从1开始，而不是从0开始

这是第{{count}}次循环

new Vue({ el:'#app' });

【本文地址】

Vue中v

Vue中v

今日新闻

推荐新闻